<!--  -->
<template>
  <div id="BAM-returnApply">
    <!-- 头部 -->
    <div class="returnApply-head">
      <nav class="head-top">
        <section class="head-top-left">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
        </section>
        <section class="head-top-right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </section>
      </nav>
      <div class="head-list">
          <ul>
          
              <li>
                <span>输入搜索:</span>
                <el-input v-model="searchNumber" placeholder="服务单号"></el-input>
              </li>
           
          
              <li>
                <span>处理状态：</span>
              <el-autocomplete
                  popper-class="my-autocomplete"
                  v-model="handleStatus"
                  :fetch-suggestions="querySearch"
                  placeholder="全部"
                  suffix-icon="el-icon-arrow-down"
                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                  </template>
                </el-autocomplete>
              </li>
           
          
              <li>
                <span>申请时间:</span>
                <el-date-picker type="date" v-model="applyTime" placeholder="请选择时间"></el-date-picker>
              </li>
           
          </ul>
          <ul>
          
              <li>
                <span>操作人员:</span>
               <el-input v-model="operator" placeholder="全部"></el-input>
              </li>
           
            <li>
                <span>处理时间:</span>
                <el-date-picker type="date" v-model="processingTime" placeholder="请选择时间"></el-date-picker>
              </li>
           
          
             
           
          </ul>
      </div>
    </div>
    <!-- 中间 -->
    <div class="returnApply-content">
        <div class="content-top">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </div>
        <template class="content-mid">
            <el-table
                :data="tableData"
                border
                style="width: 100%" >
                <el-table-column
                type='selection'
                width="55"
                 align='center'>
                </el-table-column>
                <el-table-column
                type=index
                label="服务单号"
                width="55"
                 align='center'>
                </el-table-column>
                <el-table-column
                prop="_id"
                label="申请时间"
                align='center'
                width="180">
                </el-table-column>
                <el-table-column
                prop="ordertiem"
                label="用户账号"
                width="180"
                 align='center'>
                </el-table-column>
                <el-table-column
                prop="ordername"
                label="退款金额"
                width="80"
                 align='center'>
                </el-table-column>
                <el-table-column
                prop="ordermoney"
                label="申请状态"
                width="180"
                 align='center'>
                </el-table-column>
                <el-table-column
                prop="playmoney"
                label="处理时间"
                width="80"
                 align='center'>
                </el-table-column>
                <el-table-column
                label="操作"
                width="220"
                 align='center'>
                 <el-button  size='mini'>查看详情</el-button>
                </el-table-column>
               
            </el-table>
        </template>
    </div>
    <!-- 底部 -->
    <div class="returnApply-food">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sum">
        </el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const axios = require('axios');
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      searchNumber: "",
      applyTime: "",
      resStatus: [],
      handleStatus: "",
      tableData:[],
      id:"0",
      operator:'',
      processingTime:'',
      sum:0
    };
  },
  //监听属性 类似于data概念
  computed: {
   
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    querySearch(queryString, cb) {
      var resStatus = this.resStatus;
      var results = queryString
        ? resStatus.filter(this.createFilter(queryString))
        : resStatus;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    StatusAll() {
      return [
        { value: "待付款" },
        { value: "待发货" },
        { value: "已发货" },
        { value: "已完成" },
        { value: "已关闭" },
      ];
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    
    this.tableData = await this.refresh(val)
    },
       // 刷新
    async  refresh(pageNum,sum){
      let result  = await  axios.post('http://49.233.65.169:3000/api/orderlist',{
      pageSize:5,
      pageNum:pageNum
    })
    // console.log(result);
    if(sum!=null){
      return result.count
    }
    return result.data
    },
    // 重置
    reset(){
      this. searchNumber= "";
      this. applyTime="";
      this.handleStatus="";
      this. operator='';
      this.processingTime='';
    },
    // 转换时间类型
     formatTime(row, column) {
        let time = row[column.property] * 1000
        let date = new Date(time)
        // console.log(new Date(time))
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
    async  mounted() {
    this.resStatus = this.StatusAll();
    this.tableData = await this.refresh();
    this.sum=await this.refresh(1,'')

    //     axios.post('http://49.233.65.169:3000/api/orderadd',{
    //   ordername:'123',
    //   ordernum:'123123',
    //   ordermoney:'1000',
    //   orderstate:'已支付',
    //   playmoney:'支付宝',
    //   ordertiem:'1596504760'
    // }).then((data) =>{
    //    console.log(data)
    // }).catch((error) =>{
    //   console.log(error)
    // })

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
#BAM-returnApply {
  padding: 20px;
}
.returnApply-head {
    margin-bottom: 20px;
  border: 1px solid #cccccc;
  padding: 20px;
  nav.head-top {
    display: flex;
    justify-content: space-between;
    .head-top-left {
      i.el-icon-search::before {
        width: 16px;
        height: 16px;
      }

      span {
        font-size: 16px;
        line-height: 16px;
      }
    }

    .head-top-right {
      el-button {
      }
    }
  }
  .head-list {
    width: 100%;
    ul{
        height: 50px;
        > li {
            float: left;
            width: 260px;
            display: flex;
            justify-content: space-between;
            padding: 5px;
            margin-right: 20px;
            span{
                width: 85px;
                line-height: 36px;
            }
        }
    }
    
    .my-autocomplete {
      li {
        line-height: normal;
        padding: 7px;

        .name {
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      i {
        display: block;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
.returnApply-content {
  .content-top {
      border: 1px solid #cccccc;
      padding: 20px;
      height: 58px;
      margin-bottom: 20px;
    i.el-icon-tickets {

    }

    span {

    }
  }
  .content-mid{
      el-table-column{
          text-align: center;
      }
  }
}
.returnApply-food{
  display: flex;
  justify-content: flex-end;
}
</style>